<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css"/>
		<style type="text/css">
			.wt{
				border-bottom: 1px solid #CCCCCC;
				border-top: 1px solid #CCCCCC;
				padding: 10px;
			}
			.wt>div:first-child{
				padding-bottom: 10px;
			}
			.lx{
				padding: 10px;
				border-bottom: 1px solid #CCCCCC;
			}
			.lx label{ padding:11px 0;}
			.img{
				padding: 10px;
			}
			
			.pb10{
				padding-bottom: 10px;
			}
		
.imglist{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.imgcss{
	width: 5rem;
	height: 5rem;
	border: 1px solid #CCCCCC;
	margin-right: 0.7em;
	position: relative;
}
.imgcss img{
	width: 100%;
	height: 100%;
}
.addcss{
	width: 5rem;
	height: 5rem;
	border: 1px solid #CCCCCC;
	background:#fff;
	position:relative;
}
.addcss > input{
	position:relative;
    opacity: 0;
    display: block;
    height: 100%;
    width: 100%;
    z-index:998;
}
.addcss>span{
	text-align:center;
    width:2rem;
    height:2rem;
    font-size:3rem;
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:5;
}

.guanbi{
	position: absolute;
	z-index: 99;
	top: -15%;
	left: 80%;
	border: 1px solid #C0C0C0;
	border-radius: 50%;
	background-color: white;
}
.subut{position:fixed; bottom:0; margin:0; background:#7DB1FD; border:0;}

.textcss{
	font-size: 0.8em;
}
/*
.mui-content{
	min-height: 100% !important;
	height: auto !important;
}*/
button{
	width: 100%;
	height: 2.5em;
}
input::-webkit-input-placeholder {
          /* placeholder颜色  */
         color: #aab2bd;
         /* placeholder字体大小  */
        font-size: 12px;
         /* placeholder位置  */
         text-align: right;
     }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">反馈</h1>
		</header>
		
		<div class="mui-content">
		    <div class="wt">
		    	<div class="">
		    		问题与意见 
		    	</div>
		    	<div class="">
		    		<textarea name="" rows="7" cols="22" id="feed"></textarea>
		    	</div>
		    </div>
		    
		    <div class="lx">
		    	<div class="mui-input-row">
		    	    <label id="lianxi" onclick="muipur()" class="textcss">点击选择</label>
		    	    <input type="text" id="mobile" placeholder="微信(默认)/QQ/邮箱/手机号">
		    	</div>
		    </div>
		    
		    <div class="img">
		    	<div class="pb10">
		    		图片（选填）
		    	</div>
		    	<div class="imglist" id="imgid">
		    		<div class="addcss" id="addcss" >
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2018-12-06
                        	描述：
                        <input type="file" name="file2" id="going" accept="image/*" multiple="multiple">
                        -->
					    <span>+</span>
		    		</div>
		    	</div>
		    </div>
		    
		    
		    <button type="button" class="mui-btn mui-btn-blue" onclick="sub()">提交</button>
		    <!--
            	作者：592176224@qq.com
            	时间：2018-12-06
            	描述：
            
		   	<button type="button" class="mui-btn mui-btn-blue mui-btn-block " onclick="sub()">提交</button>
		   	-->
		  
		</div>
		
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var imglist = new Array();
			var fileArr = new Array();
			var lianxi = "";
			var midlist = [];
			window.onload = function() {
				mui.init();
				mui.plusReady(function(){
				document.getElementById('addcss').addEventListener('tap', function() {
			     page.imgUp();       
				}, false);
				})
				
				
			}
			
			
			
			
			var page=null;  
            page={  
                imgUp:function(){  
                    var m=this;  
                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
                        {title:"拍照"},  
                        {title:"从相册中选择"}  
                    ]}, function(e){//1 是拍照  2 从相册中选择  
                        switch(e.index){  
                            case 1:appendByCamera();break;  
                            case 2:appendByGallery();break;  
                        }  
                    });  
                }  
                //摄像头  
            }  
            
            function setFile(fileSrc){
				let image = new Image();  
				image.src = fileSrc;
				fileArr.push(image);
			}
              // 拍照添加文件
            function appendByCamera(){
                plus.camera.getCamera().captureImage(function(e){
                    console.log(e);
                    plus.io.resolveLocalFileSystemURL(e, function(entry) { 
                    	console.log('文件',entry);
                    	var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径  
                    	//cutImage(imgSrc);
                    	let list = [{url:imgSrc}]
            			addimg(list)
                    }, function(e) { 
                        mui.toast("读取拍照文件错误：" + e.message); 
                    }); 
    
                });    
            }
            
          // 从相册添加文件
            function appendByGallery() {
            	plus.gallery.pick(function(a) {
            		console.log("第一层A",a);
            		plus.io.resolveLocalFileSystemURL(a, function(entry) {
            				console.log("第二层entry",entry);
            			plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
            				
            				console.log("第三层root",root);
            				root.getFile("head.png", {}, function(file) {
            					console.log("第四层file",file);
            					//文件已存在
            					file.remove(function() {
            						console.log("删除成功");
            						entry.copyTo(root, "head.png", function(e) {
            							var e = e.fullPath + "?version=" + new Date().getTime();
            							console.log("e",e);
            							let list = [{url:e}]
            							addimg(list)
            							
            							
            						}, function(e) {
            							console.log("copy img file:" + e.message);
            						});
            					}, function() {
            						console.log("删除" + e.message)
            					});
            				}, function() {
            					//文件不存在
            					entry.copyTo(root, "head.png", function(e) {
            						var path = e.fullPath + "?version=" + new Date().getTime();
            						console.log("path",path);
            						
            					}, function(e) {
            						console.log("copy img file:" + e.message);
            					});
            				});
            			}, function(e) {
            				console.log("get _www folder fail");
            			})
            		}, function(e) {
            			console.log("读取拍照文件错误" + e.message);
            		})
            	},{
            		filter:"none",
            		multiple:true,
            		maximum:3,
            		system:false,
            		onmaxed:function(){
                		plus.nativeUI.alert('最多只能选择三个！')
            		}
            	}, function(a) {}, {
            		filter: "image"
            	})
            }//上传头像图片 
        function cutImage(path) {
            	console.log(path);
            		
                   
                }
function addimg(data){
	console.log(JSON.stringify(data));
	 let addcss = document.getElementById("addcss");
	 //console.log(addcss);
	 	for (let i = 0; i < data.length; i++) {
	 		if(imglist.length < 4){
		 	let result = '<div class="guanbi mui-icon mui-icon-closeempty" onclick="remove(this)"></div><img src="'+data[i].url+'" alt=""/>';
		 	let div = document.createElement('div');
		 	//console.log("imglist.length",imglist.length);
		    imglist.push(data[i.url]);
		    setaddcss();
			div.className = "imgcss";
			div.innerHTML = result;
			addcss.parentNode.insertBefore(div,addcss);　
			 }else{
	    	mui.alert("只能上传4张图片");
	    	setaddcss();
	    	return;
	    	}
		}
	
}
		function muipur() {
				var btnArray = ['微信', 'QQ', '邮箱','手机号'];
				mui.confirm('', '请选择联系类型', btnArray, function(e) {
					let lab = document.getElementById("lianxi");
					lianxi = btnArray[e.index];
					lab.innerHTML = lianxi;
				})
			}
		function setaddcss(){
	        if(imglist.length >= 4) addcss.classList.add("mui-hidden");
            else addcss.classList.remove("mui-hidden");
		}
		function remove(obj){
			let z = $('.guanbi').index(obj);
			$(obj).parent().remove();
			imglist.splice(z,1);
			fileArr.splice(z,1);
			setaddcss();
		}
		
		function sub(){
			upimg();
			/*if(!yanz()){
				return;
			}*/
			
		}
		
		function yanz(){
			let feed = document.getElementById("feed");
	        let mobile = document.getElementById("mobile");
			if( "" == feed.value || " " == feed.value || null == feed.value){
				mui.toast("问题不能为空-_-!")
				return false;
			}
			if( "" == mobile.value || " " == mobile.value || null == mobile.value){
				mui.toast("联系方式不能为空-_-!")
				return false;
			}
			return true;
			
		}
		
		function upimg(){
			let i = 0;
			//console.log("图片数组",JSON.stringify(fileArr));
			let imgarr = document.getElementById("imgid").getElementsByTagName("img");
			console.log(imgarr);
			let listfile = [];
			mui.each(imgarr, function(index, item){
	 		console.log(index)
	 		console.log(item.src)
	   		//strat(item)
			//listfile.push(item);
			console.log(JSON.stringify(item));
			createUp(item);
			})
			//return;
			//console.log("数组",JSON.stringify(listfile));
			
	function createUp (files) {
		let url =  hurl + '/api/Image/upload';
	    var task = plus.uploader.createUpload(url,
	        {method:"POST"},
	        function(t,status){ //上传完成
	            if(status==200){
	            	console.log("上传成功："+t.responseText);
	            	var data = JSON.parse(evt.target.responseText);
	            	//func(data);
	            }else{
	                console.log("上传失败："+status);
	            }
	        }
	    );
	    //添加其他参数
	    //task.addFile("image", files); // 文件对象
	    task.addData("access_token",  acctoken()); // 可以增加表单数据
//	    task.addData("name","test");
        // 页面中要上传的 图片路径
	    task.addFile(files.src,{key:files.src});
	    task.start();
	}
			return;
			strat();
			function strat(){
				let arr = listfile;
				
				//return;
				upladfile(arr[i],function(res){
					console.log(res);
					if(res.code == 1){
						midlist.push(res.data[0].mid); 
					}
					if(res.code == -1){
						mui.toast(res.message);
					}
					if(i <= fileArr.length){
						i++;
						strat();
					}else{
						console.log(midlist);
						let feed = document.getElementById("feed");
				        let mobile = document.getElementById("mobile");
						let data = {
								url:"/api/System/go_feedback",
								data:{
									access_token : acctoken()||"",
									content : feed.value||"",
									contact_category : lianxi||"微信",
									contact : mobile.value||"",
									feedback_img:midlist,
								}
							}
							ajax(data,function(res1){
								console.log(res1);
								if(res1.code == -1){
									mui.toast(res.message);
								}
								if(res1.code == 1){
									//mui.toast("修改成功");
									let data = {
										url:"/api/System/go_feedback_img",
										data:{
											access_token : acctoken()||"",
											id : res1.data[0].id||"",
											feedback_img : midlist||[],
											}
									};
									ajax(data,function(res2){
										console.log(res2);
										if(res2.code == -1){
											mui.toast(res.message);
										}
										if(res2.code == 1){
											mui.toast("反馈成功");
											}
									})
									}
							})
					}
				})
			}
			
			
		}
		</script>
	</body>

</html>